<template>
  <div class="shuju">
    <div class="" v-if="expireStatus==2">
      <div class="shuju_tips color_f flex bor_rad5">
        <div class="mar_r20">温馨提示：店铺即将到期，到期后店铺仍可访问，但店铺功能不可使用，建议尽快联系您的商务经理进行续费！</div>
      </div>
    </div>
    <div class="body flex-bet flex-y-top">
      <div class="flex-g-1">
        <div class="flex bor_rad5">
          <div class="flex-g-0 t_l wid30 color_1d fon_16 wei ba_f pad_15 bor_rad5" style="height: 105px">
            <div class="mar_t10">
              <span>{{ greet() }} !</span>
              管理员</div>
            <div class="mar_t10"> 欢迎登入后台管理系统</div>
          </div>
          <div class="flex-g-1 t_l wid70 ba_f mar_l20 pad_15 bor_rad5" style="height: 105px">
            <div class="shuju_title">
              <div class="shuju_title_text">
                <span>待办事项</span>
              </div>
            </div>
            <div class="flex mar_t10">
              <div class="flex-g-1 flex pad_l_20">
                <div>
                  <span class="iconfont iconshanghu fon_14 mar_r5"></span>
                  <span class="fon_14 color_9">待接单：</span>
                </div>
                <div class="maincolor fon_14 marb_l15 wei">{{ dddata.peedCount || 0}}</div>
              </div>
              <div class="flex-g-1 flex pad_l_20">
                <div>
                  <span class="iconfont iconshanghu fon_14 mar_r5"></span>
                  <span class="fon_14 color_9">待完成：</span>
                </div>
                <div class="maincolor fon_14 marb_l15 wei">{{ dddata.completedCount || 0}}</div>
              </div>
              <div class="flex-g-1 flex pad_l_20">
                <div>
                  <span class="iconfont iconshanghu fon_14 mar_r5"></span>
                  <span class="fon_14 color_9">待核销：</span>
                </div>
                <div class="maincolor fon_14 marb_l15 wei">{{ dddata.raisedCount || 0}}</div>
              </div>
              <div class="flex-g-1 flex pad_l_20">
                <div>
                  <span class="iconfont iconshanghu fon_14 mar_r5"></span>
                  <span class="fon_14 color_9">售后/维权订单：</span>
                </div>
                <div class="maincolor fon_14 marb_l15 wei">{{ dddata.safeCount || 0}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="ba_f bor_rad5 mar_t20">
          <div class="tit flex pad_10">
            <div class="shuju_title">
              <div class="shuju_title_text">
                <span>实时概况</span>
                <span class="fnormal fon_14 color_9 mar_l10">更新时间：{{ dateFormat(date) }}</span>
              </div>
            </div>
            <!--                    <div class="fon_14 wei pad_tr_23">实时概况</div>-->
            <!--                    <div class="color_9 fon_12 mar_l20">更新时间：2020-07-03 17:10:1</div>-->
            <!--                    <div class="mar_l10">-->
            <!--                        <el-tooltip effect="dark" placement="top">-->
            <!--                            <div slot="content">实时概况</div>-->
            <!--                            <button type="button"-->
            <!--                                    class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
            <!--                                <span><i class="el-icon-question"></i></span>-->
            <!--                            </button>-->
            <!--                        </el-tooltip>-->
            <!--                    </div>-->
          </div>
          <div class="tongji_con flex pad_tb_20">
            <div class="flex-g-1 pad_l_30">
              <div class="flex">
                <div class="title6 mar_l20">营业总额(元)</div>
              </div>
              <div class="fon_30  title35 mar_t10 wei mar_l20">{{ dddata.todayTotal || 0}}</div>
              <div class="fon_12 title6 lh25 mar_t10 mar_l20">昨日：{{ dddata.yesterdayTotal || 0}}</div>
            </div>
            <div class="flex-g-1 pad_l_30">
              <div class="flex">
                <div class="title6 mar_l20">预计收入(元)</div>
              </div>
              <div class="fon_30  title35 mar_t10 wei mar_l20">{{ dddata.yujiSum || 0}}</div>
              <div class="fon_12 title6 lh25 mar_t10 mar_l20">昨日：{{ dddata.yesterSum || 0}}</div>
            </div>
            <div class="flex-g-1 pad_l_30">
              <div class="flex">
                <div class="title6 mar_l20">有效订单数(单)</div>
              </div>
              <div class="fon_30  title35 mar_t10 wei mar_l20">{{ dddata.payCount || 0}}</div>
              <div class="fon_12 title6 lh25 mar_t10 mar_l20">昨日：{{ dddata.yesPayCount || 0}}</div>
            </div>
            <div class="flex-g-1 pad_l_30">
              <div class="flex">
                <div class="title6 mar_l20">支付人数(人)</div>
              </div>
              <div class="fon_30  title35 mar_t10 wei mar_l20">{{ dddata.userCount || 0}}</div>
              <div class="fon_12 title6 lh25 mar_t10 mar_l20">昨日：{{ dddata.yesuserCount || 0}}</div>
            </div>
            <div class="flex-g-1 pad_l_30">
              <div class="flex">
                <div class="title6 mar_l20">取消/售后订单(单)</div>
              </div>
              <div class="fon_30  title35 mar_t10 wei mar_l20">{{ dddata.safeCount || 0}}</div>
              <div class="fon_12 title6 lh25 mar_t10 mar_l20">昨日：{{ dddata.yesSafeCount || 0}}</div>
            </div>
            <div class="flex-g-1 pad_l_30">
              <div class="flex">
                <div class="title6 mar_l20">下单转化率(%)</div>
              </div>
              <div class="fon_30  title35 mar_t10 wei mar_l20">{{ dddata.conversion || 0}}</div>
              <div class="fon_12 title6 lh25 mar_t10 mar_l20">昨日：{{ dddata.yesConversion || 0}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--        <div class="pad_15 ba_f mar_t15">-->
    <!--            <div class="shuju_notice flex-bet">-->
    <!--                <div class="flex-g-0 mar_r10"><i class="fon_16 el-icon-bell color_9"></i></div>-->
    <!--                <div class="flex-g-1 overflowlnr">-->
    <!--                    <div v-if="notice.title && notice.introduction">{{notice.title}}/{{notice.introduction}}</div>-->
    <!--                    <div v-else>暂无系统公告</div>-->
    <!--                </div>-->
    <!--                <div class="flex-g-0 subjectcolor2"><a href="#" @click="more('notice')">更多</a></div>-->
    <!--            </div>-->
    <!--        </div>-->

<!--    <div class="mar_t15 flex-bet flex-y-top" style="height: 280px">-->
<!--      <div class="bflex-3 ba_f outmain">-->
<!--        <div class="color_f bor_rad5 pad_20 flex bblue">-->
<!--          <img :src="shopData.icon" class="namelogo bor_rad50"/>-->
<!--          <div class="mar_l10">-->
<!--            <el-badge value="正常营业" class="item badge" type="primary" v-if="shopInfoArr.storeOpen=='1'">-->
<!--              {{ shopData.name }}-->
<!--            </el-badge>-->
<!--            <el-badge value="休息中" class="item" type="warning" v-if="shopInfoArr.storeOpen=='2'">-->
<!--              {{ shopData.name }}-->
<!--            </el-badge>-->
<!--            <el-badge value="紧急关店" class="item" v-if="shopInfoArr.storeOpen=='3'">-->
<!--              {{ shopData.name }}-->
<!--            </el-badge>-->
<!--            <div>ID:{{ shopData.id }}</div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="pad_20">-->
<!--          <div class="flex-bet bor_b_e4 pad_b_15">-->
<!--            <div class="flex">-->
<!--              <div class="colorTiao tiao1 mar_r10"></div>-->
<!--              <div>门店状态</div>-->
<!--            </div>-->
<!--            <div>-->
<!--              <el-switch class="mar_l10" v-model="shopData.storeOpen" active-value="1" inactive-value="2"-->
<!--                         @change="changeSwitch(shopData.storeOpen,1)"></el-switch>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="flex-bet bor_b_e4 pad_b_15 pad_t_15">-->
<!--            <div class="flex">-->
<!--              <div class="colorTiao tiao2 mar_r10"></div>-->
<!--              <div>自动接单</div>-->
<!--            </div>-->
<!--            <div>-->
<!--              <el-switch class="mar_l10" v-model="shopData.receiveStatus" active-value="1" inactive-value="2"-->
<!--                         @change="changeSwitch2(shopData.receiveStatus,2)"></el-switch>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="flex-bet pad_b_15 pad_t_15">-->
<!--            <div class="flex">-->
<!--              <div class="colorTiao tiao3 mar_r10"></div>-->
<!--              <div>营业时间</div>-->
<!--            </div>-->
<!--            <div class="flex">-->
<!--              <div v-if="shopInfoArr.timeType=='2'">-->
<!--                <span v-for="(item,index) in timeArr" :key="index"-->
<!--                      class="mar_r20">{{ item.startTime }}-{{ item.endTime }}</span>-->
<!--              </div>-->
<!--              <div v-else>全天营业</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="bflex-7 ba_f outmain mar_l20">-->
<!--        <div class="flex-bet">-->
<!--          <div class="shuju_title">-->
<!--            <div class="shuju_title_text">-->
<!--              <span>运营资讯</span>-->
<!--            </div>-->
<!--            <div class="ab r0 mar_r20 color_9"><a href="#" @click="more('info')">更多</a></div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="bafd flex flex-wrap pad_20 mar_t10">-->
<!--          <div v-if="infoList.length>0" style="height: 150px;" class="flex wid flex-wrap flex-y-top">-->
<!--            <div class="wid50 pad_tb_5 flex curs" v-for="(item,index) in infoList.slice(0, 8)" :key="index"-->
<!--                 @click="handleEdit(item)">-->
<!--              <div class="flex-g-1 overflowlnr">{{ item.introduction }}</div>-->
<!--              <div class="flex-g-0 mar_r20 fon_12">{{ item.createdAt.slice(0, 10) }}</div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div v-else class="t_c wid" style="height: 150px;">-->
<!--            <div class="mar_t30"><img alt="logo" src="@/assets/public/notic.png"-->
<!--                                      style="width: 50px;height:50px">-->
<!--            </div>-->
<!--            <div class="color_9">暂无数据</div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
    <div class="outmain pad_20 ba_f mar_t20">
      <div class="flex-bet">
        <div class="bflex-5">
          <div class="shuju_title">
            <div class="shuju_title_text">
              <span>营业概况</span>
            </div>
          </div>
<!--          <div class="flex-bet mar_t10">-->
<!--            <div>-->
<!--              <p class="color_6 fon_12">今日营业额(元)</p>-->
<!--              <p class="fon_24 title35 mar_t5">{{ ssdata.todayTotal }}</p>-->
<!--            </div>-->
<!--          </div>-->
          <div>
            <div id="mainEch3" style="height: 320px"></div>
          </div>
        </div>
        <div class="bflex-5">
          <div class="shuju_title">
            <div class="shuju_title_text">
              <span>支付概况</span>
            </div>
          </div>
          <div class="flex-bet pad_r_20">
            <div id="mainEch32" class="mar_r20" style="height: 280px;width:400px;margin-top: 40px"></div>
            <div id="mainEch42" class="" style="height: 280px;width:380px;margin-top: 40px"></div>
          </div>

<!--          <div class="flex-bet mar_t10">-->
<!--            <div class="bortColor flex-bet flex-g-1 pad_20 flex-y-top mar_r20">-->
<!--              <div>-->
<!--                <p class="title6 fon_14">预计收入</p>-->
<!--                <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ ssdata.yujiSum }}</p>-->
<!--                <div class="flex">-->
<!--                  <p class="fon_12 title6 lh25">昨日全天： {{ ssdata.yesterSum }}</p>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="bortColor flex-bet flex-g-1 pad_20 flex-y-top mar_r20">-->
<!--              <div>-->
<!--                <p class="title6 fon_14">有效订单</p>-->
<!--                <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ ssdata.payCount }}</p>-->
<!--                <div class="flex">-->
<!--                  <p class="fon_12 title6 lh25">昨日全天： {{ ssdata.yesPayCount }}</p>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="flex-bet mar_t20">-->
<!--            <div class="bortColor flex-bet flex-g-1 pad_20 flex-y-top mar_r20">-->
<!--              <div>-->
<!--                <p class="title6 fon_14">付款人数</p>-->
<!--                <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ ssdata.userCount }}</p>-->
<!--                <div class="flex">-->
<!--                  <p class="fon_12 title6 lh25">昨日全天： {{ ssdata.yesuserCount }}</p>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="bortColor flex-bet flex-g-1 pad_20 flex-y-top mar_r20">-->
<!--              <div>-->
<!--                <p class="title6 fon_14">浏览量</p>-->
<!--                <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ ssdata.visitCount }}</p>-->
<!--                <div class="flex">-->
<!--                  <p class="fon_12 title6 lh25">昨日全天：{{ ssdata.yesVisitCount }}</p>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
        </div>
      </div>
    </div>
    <div class="outmain pad_20 ba_f bor_rad5 mar_t20">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>订单概况</span>
        </div>
      </div>
      <div class="main-icon flex t_l mar_t20">
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">外卖有效订单</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ dddata.outCount || 0 }}</p>
              <p class="fon_12 title6 lh25">营业金额：{{ dddata.outMoney || 0 }}</p>
              <p class="fon_12 title6 lh25">退款售后订单：{{ dddata.outRefundMoney || 0 }}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">堂食有效订单</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ dddata.inCount || 0 }}</p>
              <p class="fon_12 title6 lh25">营业金额：{{ dddata.inMoney  || 0}}</p>
              <p class="fon_12 title6 lh25">退款售后订单：{{ dddata.inRefundMoney  || 0}}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">快餐有效订单</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ dddata.fastCount  || 0}}</p>
              <p class="fon_12 title6 lh25">营业金额：{{ dddata.fastMoney  || 0}}</p>
              <p class="fon_12 title6 lh25">退款售后订单：{{ dddata.fastRefundMoney  || 0}}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">当面付有效订单</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ dddata.payFaceCount  || 0}}</p>
              <p class="fon_12 title6 lh25">营业金额：{{ dddata.payFaceMoney  || 0}}</p>
              <p class="fon_12 title6 lh25 yc">退款售后订单：{{ dddata.payFaceRefundMoney  || 0}}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">其他订单</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ dddata. otherCount  || 0}}</p>
              <p class="fon_12 title6 lh25">营业金额：{{ dddata.otherMoney || 0}}</p>
              <p class="fon_12 title6 lh25 yc">退款售后订单：{{ dddata.otherCount  || 0}}</p>
            </div>
          </div>
        </div>
<!--        <div class="flex-1 t_l pad_20 borderBG">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="title6 fon_14">售后/维权订单</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ dddata.safeCount }}</p>-->
<!--              <p class="fon_12 title6 lh25">外卖订单：{{ dddata.safeOkCount }}</p>-->
<!--              <p class="fon_12 title6 lh25">预约订单：{{ dddata.beSafeCount }}</p>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
      </div>
    </div>
    <div class="mar_t20 ba_f outmain pad_20 ">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>流量看板</span>
        </div>
      </div>
      <div class="flex-bet">
        <div class="bflex-7 outmain" style="height: 390px;">
          <div id="mainEch" style="height:360px"></div>
        </div>
        <div class="bflex-3 mar_l20">
          <div class="flex-bet pad_20 flex-y-top">
            <div>
              <p class="title6 fon_14">今日浏览量(pv)</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ lldata.visitTotal }}</p>
              <div class="flex">
                <p class="fon_12 title6 lh25">昨日： {{ lldata.visitYesCount }}</p>
                <!--                                <p class="fon_12 title6 lh25 mar_l20">全部 &#45;&#45;</p>-->
              </div>
            </div>
            <!--                        <div class="toolTip">-->
            <!--                            <el-tooltip effect="dark" placement="top">-->
            <!--                                <div slot="content">统计周期内，店铺所有页面被访问的次数，一个人在统计时间内访问多次记为多次</div>-->
            <!--                                <button type="button"-->
            <!--                                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
            <!--                                    <span><i class="el-icon-question"></i></span>-->
            <!--                                </button>-->
            <!--                            </el-tooltip>-->
            <!--                        </div>-->
          </div>
          <div class="flex-bet pad_20 flex-y-top mar_t20">
            <div>
              <p class="title6 fon_14">今日访客数(uv)</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ lldata.totalVisitCount }}</p>
              <div class="flex">
                <p class="fon_12 title6 lh25">昨日： {{ lldata.visitSumCount }}</p>
                <!--                                <p class="fon_12 title6 lh25 mar_l20">全部 &#45;&#45;</p>-->
              </div>
            </div>
            <!--                        <div class="toolTip">-->
            <!--                            <el-tooltip effect="dark" placement="top">-->
            <!--                                <div slot="content">统计周期内，全店各页面的访问人数，同一访客多次访问会进行去重</div>-->
            <!--                                <button type="button"-->
            <!--                                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
            <!--                                    <span><i class="el-icon-question"></i></span>-->
            <!--                                </button>-->
            <!--                            </el-tooltip>-->
            <!--                        </div>-->
          </div>
        </div>
      </div>
    </div>
    <div class="mar_t20 pad_20 ba_f outmain">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>商品看板</span>
        </div>
      </div>
      <div class="mar_t20 flex-bet">
        <div class="flex-g-1" style="height: 520px;">
          <div class="flex t_l">
            <div class="title35">销量TOP10商品</div>
            <!--                        <div class="toolTip mar_l10">-->
            <!--                            <el-tooltip effect="dark" placement="top">-->
            <!--                                <div slot="content">统计周期内，门店销量排行前10的商品</div>-->
            <!--                                <button type="button"-->
            <!--                                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
            <!--                                    <span><i class="el-icon-question"></i></span>-->
            <!--                                </button>-->
            <!--                            </el-tooltip>-->
            <!--                        </div>-->
          </div>
          <div class="mar_t10 shuju_table">
            <el-table
                :data="goodsData"
                stripe
                style="width: 100%">
              <el-table-column
                  prop="id"
                  label="排名"
              >
              </el-table-column>
              >
              <el-table-column
                  prop="name"
                  label="商品名称"
              >
              </el-table-column>
              >
              <el-table-column
                  prop="num"
                  label="商品销量数">
              </el-table-column>
              <el-table-column
                  prop="money"
                  label="销售额">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="flex-g-1 mar_l20" style="height: 520px;">
          <div class="flex t_l">
            <div class="title35">支付TOP10商品</div>
            <!--                        <div class="toolTip mar_l10">-->
            <!--                            <el-tooltip effect="dark" placement="top">-->
            <!--                                <div slot="content">统计周期内，门店支付排行前10的商品</div>-->
            <!--                                <button type="button"-->
            <!--                                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
            <!--                                    <span><i class="el-icon-question"></i></span>-->
            <!--                                </button>-->
            <!--                            </el-tooltip>-->
            <!--                        </div>-->
          </div>
          <div class="mar_t10 shuju_table">
            <el-table
                :data="orderData"
                stripe
                style="width: 100%"
            >
              <el-table-column
                  prop="id"
                  label="排名"
              >
              </el-table-column>
              >
              <el-table-column
                  prop="name"
                  label="商品名称"
              >
              </el-table-column>
              >
              <el-table-column
                  prop="totalMoney"
                  label="销售额">
              </el-table-column>
              <el-table-column
                  prop="num"
                  label="商品销量">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <edit ref="edit"></edit>
  </div>
</template>
<script>
import echarts from 'echarts'
import {realProfit, changeShopStatus} from "@/api/statistics";
import Edit from "./components/infoedit";

export default {
  components: {Edit},
  mounted() {
    this.bus.$emit('loading', true);
    this.init();
  },
  data() {
    return {
      notice: {},
      infoList: [],//资讯列表
      shopData: {
        receiveStatus: '2',
      },//包含门店Logo 门店名称 营业状态 自动接单
      shopInfoArr: {},//包含门店状态，时间
      timeArr: [],//时间段
      ssdata: {},//实时概况
      dddata: {},//订单概况
      lldata: {},//流量看板
      goodsData: [],
      orderData: [],
      echarts1_option: {
        color: ['#4284ED', '#42CCF0'],
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            var time = '时间：' + (Number(params[0].name) - 1) + ':00' + '~' + Number(params[0].name) + ':00';
            for (var i = 0; i < params.length; i++) {
              var numbers = '</br>' + params[i].seriesName + '：' + params[i].value;
              time += numbers
            }
            return time
          }
        },
        legend: {
          data: ['浏览量', '访客数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // 去除坐标轴上的刻度线
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          },
          // x轴的字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          // x轴的颜色和宽度
          axisLine: {
            lineStyle: {
              color: '#f7f7f7',
              width: 2,   //这里是坐标轴的宽度,可以去掉
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          axisTick: {       //y轴刻度线
            "show": false
          },
          axisLine: {
            "show": false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#DDDDDD',
            },
            show: true
          }
        },
        series: [
          {
            name: '浏览量',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: []
          },
          {
            name: '访客数',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: []
          }
        ]
      },
      echarts1_option3: {
        color: ['#1890FF', '#2FC25B'],
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            var time = '时间：' + (Number(params[0].name) - 1) + ':00' + '~' + Number(params[0].name) + ':00';
            for (var i = 0; i < params.length; i++) {
              var numbers = '</br>' + params[i].seriesName + '：' + params[i].value;
              time += numbers
            }
            return time
          }
        },
        legend: {
          data: ['今日营业额'],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // 去除坐标轴上的刻度线
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          },
          // x轴的字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          // x轴的颜色和宽度
          axisLine: {
            lineStyle: {
              color: '#F7F7F7',
              width: 2,   //这里是坐标轴的宽度,可以去掉
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          axisTick: {       //y轴刻度线
            "show": false
          },
          axisLine: {
            "show": false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#DDDDDD',
            },
            show: true
          }
        },
        series: [
          {
            name: '今日营业额',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: []
          },
          // {
          //   name: '昨日营业额',
          //   type: 'line',
          //   stack: '总量',
          //   smooth: true,
          //   data: []
          // }
        ]
      },
      echarts1_option2: {
        color: ['#1890FF', '#2FC25B', '#FBD44B', '#F4667C', '#EBA675'],
        title: {
          // text: '折线图堆叠'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'line',      // 默认为直线，可选为：'line' | 'shadow'
            color: '#aaa',
          }
        },
        legend: {
          data: ['结算金额', '访客数', '支付订单数', '浏览量', '客单价']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // 去除坐标轴上的刻度线
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          },
          // x轴的字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          // x轴的颜色和宽度
          axisLine: {
            lineStyle: {
              color: '#4ECB73',
              width: 2,   //这里是坐标轴的宽度,可以去掉
            }
          },
          data: [],
        },
        yAxis: {
          type: 'value',
          axisTick: {       //y轴刻度线
            "show": false
          },
          axisLine: {
            "show": false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          splitLine: {    //网格线
            lineStyle: {
              type: 'dotted',
              color: '#DDDDDD',
            },
            show: true //隐藏或显示
          }

        },
        series: [
          {
            name: '结算金额',
            type: 'line',
            stack: '总量',
            data: [],
            smooth: true
          },
          {
            name: '访客数',
            type: 'line',
            stack: '总量',
            data: [],
            smooth: true
          },
          {
            name: '支付订单数',
            type: 'line',
            stack: '总量',
            data: [],
            smooth: true
          },
          {
            name: '浏览量',
            type: 'line',
            stack: '总量',
            data: [],
            smooth: true
          },
          {
            name: '客单价',
            type: 'line',
            stack: '总量',
            data: [],
            smooth: true
          }
        ]
      },
      date: new Date(),
      expireStatus:'',
      echarts3_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F','#EBA675','#FF7E3B'],
        tooltip: {
          trigger: 'item',
          // formatter:function(data){ return data.percent.toFixed(2);}
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['微信支付','支付宝支付','余额支付','货到付款','现金支付','自有支付方式']
        },
        series: [
          {
            name: '支付方式',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '微信支付'},
              {value: 20.00, name: '支付宝支付'},
              {value: 20.00, name: '余额支付'},
              {value: 20.00, name: '货到付款'},
              {value: 20.00, name: '现金支付'},
              {value: 20.00, name: '自有支付方式'},
            ],
          }
        ]
      },
      echarts4_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F','#EBA675'],
        tooltip: {
          trigger: 'item',
          // formatter:function(data){ return data.percent.toFixed(2);}
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['外卖','堂食','快餐','当面付','其他']
        },
        series: [
          {
            name: '支付渠道',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '外卖'},
              {value: 20.00, name: '堂食'},
              {value: 20.00, name: '快餐'},
              {value: 20.00, name: '当面付'},
              {value: 20.00, name: '其他'},
            ],
          }
        ]
      },
    }
  },
  methods: {
    // more(type) {
    //   if (type == 'notice') {
    //     this.$router.push('noticeset');
    //   } else if (type == 'info') {
    //     this.$router.push('infoset');
    //   }
    // },
    init() {
      this.realProfit()
      // this.mainEch32()
      // this.mainEch42()
    },
    async realProfit() {
      const {data} = await realProfit();
      // console.log(data, data.todayTotal)
      if (data) {
        // this.notice.title = data.noticeData[0] ? data.noticeData[0].title : '暂无公告'  //公告
        // this.notice.introduction = data.noticeData[0] ? data.noticeData[0].introduction : ''

        // this.infoList = data.informationData  //资讯列表

        // this.shopData = data.shopData
        // this.shopInfoArr = data.shopInfoArr
        // if (data.shopInfoArr.timeType == '2') {
        //   this.timeArr = data.shopInfoArr.timeArr.map((v => ({
        //     startTime: v.startTime,
        //     endTime: v.endTime
        //   })))
        //   console.log(' this.timeArr', this.timeArr)
        // }
        // this.shopData.printCount = data.printCount

        // this.sYData.todayTotal = data.todayTotal
        // this.ssdata.yesterdayTotal = data.yesterdayTotal
        // this.ssdata.yesterdayTotal = data.yesterdayTotal
        // this.ssdata.yujiSum = data.yujiSum
        // this.ssdata.yesterSum = data.yesterSum
        // this.ssdata.payCount = data.payCount
        // this.ssdata.yesPayCount = data.yesPayCount
        // this.ssdata.userCount = data.userCount
        // this.ssdata.yesuserCount = data.yesuserCount
        // this.ssdata.visitCount = data.visitCount
        // this.ssdata.yesVisitCount = data.yesVisitCount

        // this.sYData.peedCount = data.peedCount
        // this.sYData.completedCount = data.completedCount
        // this.sYData.raisedCount = data.raisedCount
        // this.sYData.safeCount = data.safeCount


        //今日实时概况
        console.log(123, data)
        this.echarts1_option3.series[0].data = data.todayChar.map(item => item.money);
        // this.echarts1_option3.series[1].data = data.yesterChar.map(item => item.money);
        this.echarts1_option3.xAxis.data = data.todayChar.map(item => item.hours);
        this.jrgk()


        // this.dddata.peiCount = data.peiCount
        // this.dddata.peiOkCount = data.peiOkCount
        // this.dddata.peiErrorCount = data.peiErrorCount

        this.dddata.peedCount = data.peedCount
        this.dddata.completedCount = data.completedCount
        this.dddata.raisedCount = data.raisedCount
        this.dddata.safeCount = data.safeCount
        this.dddata.yesSafeCount = data.yesSafeCount
        this.dddata.todayTotal = data.todayTotal
        this.dddata.yesterdayTotal = data.yesterdayTotal
        this.dddata.yujiSum = data.yujiSum
        this.dddata.yesterSum = data.yesterSum
        this.dddata.payCount = data.payCount
        this.dddata.yesPayCount = data.yesPayCount
        this.dddata.userCount = data.userCount
        this.dddata.yesuserCount = data.yesuserCount
        this.dddata.conversion = data.conversion
        this.dddata.yesConversion = data.yesConversion
        this.dddata.outCount = data.outCount
        this.dddata.outMoney = data.outMoney
        this.dddata.outRefundMoney = data.outRefundMoney
        this.dddata.inCount = data.inCount
        this.dddata.inMoney = data.inMoney
        this.dddata.inRefundMoney = data.inRefundMoney
        this.dddata.fastCount = data.fastCount
        this.dddata.fastMoney = data.fastMoney
        this.dddata.fastRefundMoney = data.fastRefundMoney
        this.dddata.payFaceCount = data.payFaceCount
        this.dddata.payFaceMoney = data.payFaceMoney
        this.dddata.payFaceRefundMoney = data.payFaceRefundMoney
        this.dddata.otherCount = data.otherCount
        this.dddata.otherMoney = data.otherMoney
        // this.dddata.peedOkCount = data.peedOkCount
        // this.dddata.dePeedCount = data.dePeedCount
        // this.dddata.deliveredCount = data.deliveredCount
        // this.dddata.deliveredOkCount = data.deliveredOkCount
        // this.dddata.bedeliveredCount = data.bedeliveredCount
        // this.dddata.raisedCount = data.raisedCount
        // this.dddata.raisedOkCount = data.raisedOkCount
        // this.dddata.beraisedCount = data.beraisedCount
        // this.dddata.completedCount = data.completedCount
        // this.dddata.completedOkCount = data.completedOkCount
        // this.dddata.becompletedCount = data.becompletedCount
        // this.dddata.safeCount = data.safeCount
        // this.dddata.safeOkCount = data.safeOkCount
        // this.dddata.beSafeCount = data.beSafeCount

        this.lldata.visitTotal = data.visitTotal
        this.lldata.totalVisitCount = data.totalVisitCount
        this.lldata.visitYesCount = data.visitYesCount
        this.lldata.visitSumCount = data.visitSumCount
        this.echarts1_option.series[0].data = data.visitArr.map(item => item.money);
        this.echarts1_option.series[1].data = data.visitGroupArr.map(item => item.money);
        this.echarts1_option.xAxis.data = data.visitArr.map(item => item.hours);
        this.llkb()

        this.goodsData = data.goodsData
        this.orderData = data.orderData

        this.expireStatus = data.expireStatus

        this.echarts3_option.series[0].data[0].value = +data.wxPayMoney;
        this.echarts3_option.series[0].data[1].value = +data.aliPayMoney;
        this.echarts3_option.series[0].data[2].value = +data.balanceMoneyy;
        this.echarts3_option.series[0].data[3].value = +data.deliveryMoney;
        this.echarts3_option.series[0].data[4].value = +data.offlineMoney;
        this.echarts3_option.series[0].data[5].value = +data.offlineMoney;
        this.mainEch32()
        this.echarts4_option.series[0].data[0].value = +data.outMoney;
        this.echarts4_option.series[0].data[1].value = +data.inMoney;
        this.echarts4_option.series[0].data[2].value = +data.fastMoney;
        this.echarts4_option.series[0].data[3].value = +data.payFaceMoney;
        this.echarts4_option.series[0].data[4].value = +data.otherMoney;
        this.mainEch42()
        this.bus.$emit('loading', false)
      }
    },
    jrgk() {
      let myChart = echarts.init(document.getElementById('mainEch3'))
      myChart.setOption(this.echarts1_option3, true)
    },
    llkb() {
      let myChart = echarts.init(document.getElementById('mainEch'))
      myChart.setOption(this.echarts1_option, true)
    },
    async changeSwitch(row, type) {
      const {msg} = await changeShopStatus({storeOpen: row, type,});
      this.$baseMessage(msg, "success");
      this.init();
    },
    async changeSwitch2(row, type) {
      const {msg} = await changeShopStatus({receiveStatus: row, type});
      this.$baseMessage(msg, "success");
      this.init();
    },
    handleEdit(row) {
      if (row) {
        this.$refs["edit"].showEdit(row);
      }
    },
    mainEch32(){
      let myChart = echarts.init(document.getElementById('mainEch32'))
      myChart.setOption(this.echarts3_option, true)
    },
    mainEch42(){
      let myChart = echarts.init(document.getElementById('mainEch42'))
      myChart.setOption(this.echarts4_option, true)
    },
    greet(){
      var content=''
      var date=new Date()
      var hours=date.getHours()
      if(hours>=6&&hours<12){
        content='上午好'
      }else if(hours>=12&&hours<18){
        content='下午好'
      }else{
        content='晚上好'
      }
      return content
    },
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },
  }
}
</script>
<style lang="scss" scoped>
.shuju {
  font-family: PingFangSC, "Microsoft Yahei", Helvetica, Tahoma, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", STXihei, STHeiti, Heiti, SimSun, sans-serif !important;
}

.bblue {
  background: linear-gradient(45deg, #1d42ab, #57a3f3);
}

.colorTiao {
  width: 6px;
  height: 22px;
}

.tiao1 {
  background: #5C7CEB;
}

.tiao2 {
  background: #FCAB40;
}

.tiao3 {
  background: #49CBD3;
}

.title6 {
  //color: #666;
  color: #999;
  font-size: 14px;
}

.title35 {
  color: #353535;
}

.bortColor {
  border: 1px solid #eee;
}
.borderBG{
  background: #F4F4F4;
  border-radius: 5px;
}

.bortColor1 {
  border-top: 4px solid #1890FF;
}

.bortColor2 {
  border-top: 4px solid #2FC25B;
}

.bortColor3 {
  border-top: 4px solid #FCDB69;
}

.bortColor4 {
  border-top: 4px solid #F4667C;
}

.bortColor5 {
  border-top: 4px solid #EBA675;
}

.bortColor6 {
  border-top: 4px solid #FE840C;
}

.toolTip .el-button--text {
  color: #B9B9CC;
}

.shuju_title {
  position: relative;
  padding: 10px;
  width: 100%;
  min-height: 40px;
  //background-color: #f8f8f8;
}

.shuju_title .shuju_title_text {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding-left: 9px;
  font-size: 16px;
  color: #353535;
  line-height: 20px;
}

.shuju_title .shuju_title_text::before {
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  margin-right: 5px;
  content: '';
  display: inline-block;
  height: 14px;
  width: 3px;
  background-color: #2A75ED;
}

.shuju_tips {
  background-color: #EE4141;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 20px;
  width: 100%;
  height: 56px;
}

.bafd {
  background: #fff5ed;
}

.namelogo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.lhh24 {
  height: 24px;
  line-height: 24px;
}


</style>
<style>
.el-badge__content {
  right: 1px !important;
  height: 22px;
  line-height: 20px;
}
.yc{opacity: 0}
</style>
